<template>
	<div id="bg">
		<Transition appear appear-from-class="from" appear-active-class="active" appear-to-class="to">
			<div class="container">
				<RegisterForm style="background-color: transparent"/>
			</div>
		</Transition>
	</div>
</template>
<script setup>
import RegisterForm from '@/components/RegisterForm.vue';

</script>
<style scoped>
#bg {
	background: url('@/assets/register_bg.png');
	background-size: 100% 100%;
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
}

.container {
	background-color: rgba(255,255,255,0.6);
	backdrop-filter: blur(11px);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 6px;
	width: 500px;
	height: 350px;
}

.from {
	opacity: 0;
}

.active {
	transition: 0.4s linear;
}

.to {
	opacity: 1;
}
</style>


